import { useState, useRef } from 'react';
import { CommonForm } from '@/pages/OrderModule/common/components/CommonForm';
import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import Typography from '@/pages/OrderModule/common/components/Typography';
import { Alert, Form, message } from 'antd';
import CommonLoading from '@/components/CommonLoading';
import OrderAreaRadioGroup from '../../components/OrderAreaRadioGroup1';
import OrderNumberCount from '../../components/OrderNumberCount';
import { cancelRunVolumeOp } from '../../../../services';

/** 取消跑量 */
function CancelRunVolumeModal(props) {

  const [form] = Form.useForm();

  const [loading, setLoading]=useState(false);
  const [showNumber, setShowNumber] = useState({});
  const filterIds = useRef(undefined);

  const { orderList, searchForm, selectKeys } = props;

  async function handleOk() {
    if(!showNumber.total){
      return message.info('暂无可处理的订单！')
    }
    setLoading(true);
    const { msg, success } = await cancelRunVolumeOp({
      orderIds: filterIds.current || selectKeys,
    });
    setLoading(false);
    if(success){
      message.success(msg);
      props.handleOk?.();
      props.handleCancel?.();
    }
  }

  const orderAreaRadioProps = {
    searchForm, 
    selectKeys,
    orderList,
    title: '仅限待审核、异常状态订单',
    states: [10, 30],
    otherRulesFunc(obj){
      return obj.runVolume
    },
    updateShowNumer(obj, ids){
      filterIds.current = ids;
      setShowNumber(obj);
    } 
  }

  return (
    <CommonModal title={{ title: '取消跑量' }} open={true} width="530px" onOk={handleOk} onCancel={props.handleCancel}>
      <Alert showIcon message={<Typography as="s1">注意：取消跑量后，订单商品会恢复为原商品，发货仓会更新不变！</Typography>} />
      <CommonForm
        formProps={{
          form,
        }}
        columns={[
          {
            name: 'radio-group',
            slot: <OrderAreaRadioGroup wrapStyle={{ marginTop: 16 }} {...orderAreaRadioProps} />,
          },
          {
            block: (
              <>
                <OrderNumberCount
                  data={[
                    { label: '待审核', value: showNumber[10], type: 'warning' },
                    { label: '异常', value: showNumber[30], type: 'error' },
                  ]}
                />
              </>
            ),
          },
          {
            block: <div style={{ marginTop: 16 }}>确定将这些订单取消跑量吗？</div>,
          },
        ]}
      ></CommonForm>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
}

export default CancelRunVolumeModal;
